<script setup lang="ts">
// import { areaList } from '@vant/area-data';

import { ref, onMounted, computed } from 'vue'

import {
  showConfirmDialog,
  showSuccessToast,
  showToast,
  type FormInstance
} from 'vant'
import { useRoute } from 'vue-router'
// import { useConsultStore } from '@/stores'
import router from '@/router'
// import { useUserStore } from '@/stores'

// 组件挂载完毕，获取数据
const show = ref(false);
const chosenAddressId = ref('1');
const list = [
  {
    id: '1',
    name: '张三',
    tel: '13000000000',
    address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
    isDefault: true,
  },
  {
    id: '2',
    name: '李四',
    tel: '1310000000',
    address: '浙江省杭州市拱墅区莫干山路 50 号',
  },
];


const onAdd = () => {show.value=true};
const onEdit = (item, index) => showToast('编辑地址:' + index);

const searchResult = ref([]);

const onSave = () => showToast('save');
const onDelete = () => showToast('delete');
const onChangeDetail = (val) => {
  if (val) {
    searchResult.value = [
      {
        name: '黄龙万科中心',
        address: '杭州市西湖区',
      },
    ];
  } else {
    searchResult.value = [];
  }
};



onMounted(() => {
  
})


</script>

<template>
  <div class="patient-page">
    <cp-nav-bar title="地址管理"></cp-nav-bar>
  

    <div class="patient-list">
    <van-address-list
  v-model="chosenAddressId"
  :list="list"
  default-tag-text="默认"
  @add="onAdd"
  @edit="onEdit"
/>
     
    </div>

    <van-dialog v-model:show="show" title="标题" show-cancel-button>

    <van-address-edit
  :area-list="areaList"
  show-delete
  show-set-default
  show-search-result
  :search-result="searchResult"
  :area-columns-placeholder="['请选择', '请选择', '请选择']"
  @save="onSave"
  @delete="onDelete"
  @change-detail="onChangeDetail"
/>
<van-button>提交</van-button>
 
</van-dialog>
   
  </div>
</template>

<style lang="scss" scoped>


// 底部操作栏
.van-action-bar {
  padding: 0 10px;
  margin-bottom: 10px;
  .van-button {
    color: var(--cp-price);
    background-color: var(--cp-bg);
  }
}

</style>
